// 表计运行状态
<template>
    <el-card class="box-card">
    <div class="title">
      <div class="title_box">
        <div class="title_icon"></div>
        <div class="title_value">表计运行状态</div>
      </div>
      <div class="title_more">
        <img src="../../assets/icons/more.png" alt="" class="more_img">
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="超声波气表" name="first">
        <el-carousel trigger="click" height="250px" :loop="loop" :autoplay="autoplay" direction="horizontal">
          <el-carousel-item v-for="(item,index) in list" :key="index" :style="{display:'flex'}">
            <div v-for="(item1,index) in item" :key="index" :style="{height:'200px',width:'30%'}">
              <BannerEchart :id="item1.id" :name="item1.name" :info="item1"></BannerEchart>
            </div>    
          </el-carousel-item>
        </el-carousel>  
      </el-tab-pane>
      <el-tab-pane label="膜式燃气表" name="second">
        <el-carousel trigger="click" height="250px" :loop="loop" :autoplay="autoplay" direction="horizontal">
          <el-carousel-item v-for="(item,index) in list2" :key="index" :style="{display:'flex'}">
            <div v-for="(item1,index) in item" :key="index" :style="{height:'200px',width:'30%'}">
              <BannerEchart :id="item1.id" :name="item1.name" :info="item1" style="width:100%"></BannerEchart>
            </div>    
          </el-carousel-item>
        </el-carousel> 
      </el-tab-pane>
    </el-tabs>
    
  </el-card>
</template>
<script>
import BannerEchart from '../components/icons/bannerEchart.vue'
export default {
  data() {
    return {
      chart: null,
      num:0,
      activeName: 'first',
      list:[],
      list2:[],
      loop:true,
      autoplay:false,
    }
  },
  created(){
    this.list = [
      [{
        id:'meter1',
        name:'余额状态',
        info:[ { value: 0, name: '欠压' },
            { value: 0, name: '正常' },
        ]
      },
      {
        id:'meter2',
        name:'电池状态',
        info:[
          { value: 0, name: '不足' },
          { value: 0, name: '正常' },
        ]
      },
      {
        id:'meter3',
        name:'存储状态',
        info:[
          { value: 0, name: '异常' },
          { value: 0, name: '正常' },
        ]
      },],
      [
      {
        id:'meter4',
        name:'逆流',
        info:[ { value: 0, name: '逆流' },
            { value: 0, name: '正常' },
        ]
      },
      {
        id:'meter5',
        name:'压力故障',
        info:[
          { value: 0, name: '异常' },
          { value: 0, name: '正常' },
        ]
      }
      ]
     
    ]
    this.list2 = [
      [{
        id:'meter6',
        name:'电池电压',
        info:[ { value: 0, name: '欠压' },
            { value: 0, name: '正常' },
        ]
      },
      {
        id:'meter7',
        name:'计量状态',
        info:[
          { value: 0, name: '不足' },
          { value: 0, name: '正常' },
        ]
      },
      {
        id:'meter8',
        name:'余额不足',
        info:[
          { value: 0, name: '异常' },
          { value: 0, name: '正常' },
        ]
      },],
      [
      {
        id:'meter9',
        name:'存储状态',
        info:[ { value: 0, name: '逆流' },
            { value: 0, name: '正常' },
        ]
      },
      {
        id:'meter10',
        name:'半开阀',
        info:[
          { value: 0, name: '异常' },
          { value: 0, name: '正常' },
        ]
      },
      {
        id:'meter11',
        name:'阀门异常',
        info:[
          { value: 0, name: '异常' },
          { value: 0, name: '正常' },
        ]
      }
      ]
     
    ]
  },
  components:{
    BannerEchart,
  },
  mounted() {
    
  
  },
  beforeDestroy() {
   
  },
  methods: {
   
    handleClick(tab, event) {
      console.log(11111111111111)
      console.log(tab, event);
    },
  }
}
</script>
<style scoped lang="scss">
    .title{
      height: 28px;
      color: #303133;
      font-weight: 700;
      line-height: 28px;
      padding-left: 10px;
      display: flex;
      padding-left: 10px;
      justify-content: space-between;
      margin-bottom: 10px;
      align-items: center;
      .title_box{
        width:200px;
        display: flex;
        align-items: center;
        .title_icon{
        width: 4px;
        height: 18px;
        background-color: #d26454;
        border-radius: 4px;
        margin-right: 10px;
      }
      }
    
      .title_more{
        width: 24px;
        height: 28px;
        .more_img{
          display: inline-block;
          width: 24px;
        height: 28px;
        }
      }
    }
    .echarts_box{
      width: 100%;
      display: flex;
    }
    .echart_name{
      width:100%;
      text-align: center;
      color: #000;
      margin-bottom: 20px;
    }
</style>